<template>
  <view class="page">
    <view class="page-ctx">
      <!-- <view class="addr-wrap">
				<view class="addr-item" @click="toChooseAddress()">
					<view class="addr-inner">
						<view class="addr-left">
							<view class="icon-box">
								<image src="@/static/payment/addr-marker.png"></image>
							</view>
							<view class="info-box" v-if="address_selected && address_selected.name">
								<view class="user-info">
									<text class="name">{{address_selected.name}}</text>
									<text class="phone">{{address_selected.phone}}</text>
									<text class="desc" v-if="address_selected.moren == 1">[默认地址]</text>
								</view>
								<view class="address-info">
									{{address_selected.full_addr}}
									<view class="address-detail">
										{{address_selected.address}}
									</view>
								</view>
							</view>

							<view class="addr-empty" v-else>
								请选择收货地址
							</view>
						</view>

						<view class="addr-right flex-center">
							<image src="@/static/payment/arrow.png"></image>
						</view>
					</view>
				</view>
			</view> -->

      <view class="products-wrap">
        <view class="sec-title">商品详情</view>
        <view class="product-list">
          <view
            class="product-item flex"
            v-for="(item, index) in payment_products"
            :key="index">
            <view class="poster-box">
              <image :src="item.image" mode="aspectFill"></image>
            </view>
            <view class="info">
              <view class="title-box">
                <view class="title ellipsis-2">
                  {{ item.title }}
                </view>
              </view>
              <!-- <view class="guige-box">
								<view class="guige ">
									{{item.keyVals }}
								</view>
							</view> -->

              <view class="price-info flex-between">
                <view class="price">
                  <text class="huobi">￥</text>
                  <text class="price-val">{{ item.priceSale || 0 }}</text>
                </view>

                <!-- <view class="number-box">
									<text class="num">x {{item.num}}</text>
								</view> -->
              </view>
            </view>
          </view>
        </view>

        <view class="peisong-info flex-between">
          <view class="label">发布老师</view>
          <view class="value flex">
            <image src="/static/demo.jpg" mode="aspectFit"></image>
            <view class="value-t1">代用名</view>
            <view class="value-t2">美术老师</view>
          </view>
        </view>
        <!-- <view class="remark-info flex-between" @click="openRemarkPop()">
					<view class="label">
						订单备注
					</view>
					<view class="value flex">
						<text class="text ellipsis-1">{{remark}}</text>
						<image class="arrow" src="@/static/payment/arrow.png" mode=""></image>
					</view>
				</view> -->
      </view>

      <view class="box-item box-price">
        <div class="mingxi-title">价格明细</div>

        <view class="mingxi-list">
          <view class="mingxi-item flex-between">
            <view class="label">商品总价</view>
            <view class="num">共{{ total_product_number }}件商品</view>
            <view class="value">￥{{ pay_info.goodsPrice }}</view>
          </view>
          <!-- <view class="mingxi-item flex-between">
						<view class="label">
							外贸满减
						</view>
						<view class="num">
							
						</view>
						<view class="value">
							-￥{{pay_info.foreignManjian }}
						</view>
					</view> -->
          <!-- <view class="mingxi-item flex-between">
						<view class="label">
							外贸运费
						</view>
						<view class="num">
	
						</view>
						<view class="value">
								￥{{pay_info.foreignYunfei }}
						</view>
					</view> -->

          <!--   <view class="mingxi-item flex-between">
            <view class="label">配送费</view>
            <view class="num">
             
            </view>
            <view class="value">
              {{ pay_info.yunfei || "免运费" }}
            </view>
          </view> -->

          <!-- <view
            class="mingxi-item flex-between"
            v-if="pay_info.zhekou != 10 && pay_info.zhekou != 0">
            <view class="label">会员折扣</view>
            <view class="num"> -->
          <!-- 白银会员 -->
          <!--    {{ pay_info.zhekou }}折
            </view>
            <view class="value">-￥{{ pay_info.zhekouPrice }}</view>
          </view> -->

          <view class="mingxi-item flex-between" @click="openPointsPop()">
            <view class="label">积分抵扣</view>
            <view class="num">
              <text v-if="!order_points_dixian_number">请选择抵扣积分</text>
              <text v-else>{{ jifenrule.jifen }}积分减1元</text>
            </view>
            <view class="value flex">
              <text class="value-text" v-if="order_points_dixian_number">
                - ￥{{ order_points_dixian_price }}
              </text>
              <image
                class="arrow"
                src="@/static/payment/arrow.png"
                mode=""></image>
            </view>
          </view>

          <!-- <view class="mingxi-item flex-between" @click="openCouponPop()">
            <view class="label">优惠券</view>
            <view class="num">
              {{ coupon_selected.id ? coupon_selected.title : "选择优惠券" }}
            </view>
            <view class="value flex">
              <text class="value-text" v-if="coupon_selected.id">
                - ￥{{ coupon_selected.jian }}
              </text>
              <image
                class="arrow"
                src="@/static/payment/arrow.png"
                mode=""></image>
            </view>
          </view> -->
        </view>
        <view class="total-info flex-between">
          <view class="label">合计应付</view>
          <view class="value">￥ {{ real_payment_money }}</view>
        </view>
      </view>

      <view class="box-item box-pay">
        <view class="pay-info" v-if="pay_type_value == 'weixin'">
          <!-- @click="openPaymentOptions()" -->
          <view class="pay-type flex-between">
            <text class="label">支付方式</text>
            <view class="value flex">
              <image
                class="icon"
                src="@/static/payment/type-weixin.png"
                mode=""></image>
              <text>微信支付</text>
              <!--  <image
                class="arrow"
                src="@/static/order/arrow.png"
                mode=""></image> -->
            </view>
          </view>
        </view>

        <!-- <view class="pay-info" v-else-if="pay_type_value == 'yue'">
          <view class="pay-type flex-between" @click="openPaymentOptions()">
            <text class="label">支付方式</text>
            <text class="num">可用余额：{{ my_info.money }}</text>
            <view class="value flex">
              <image
                class="icon"
                src="@/static/payment/type-yue.png"
                mode=""></image>
              <text>余额支付</text>
              <image
                class="arrow"
                src="@/static/order/arrow.png"
                mode=""></image>
            </view>
          </view>
        </view> -->

        <!-- <view class="pay-info" v-else-if="pay_type_value == 'yongjin'">
          <view class="pay-type flex-between" @click="openPaymentOptions()">
            <text class="label">支付方式</text>
            <text class="num">可用佣金：{{ my_info.commission || "0" }}</text>
            <view class="value flex">
              <image
                class="icon"
                src="@/static/payment/yongjin.png"
                mode=""></image>
              <text>佣金支付</text>
              <image
                class="arrow"
                src="@/static/order/arrow.png"
                mode=""></image>
            </view>
          </view>
        </view> -->

        <!-- <view class="pay-info" v-else-if="pay_type_value == 'xianxia'">
          <view class="pay-type flex-between" @click="openPaymentOptions()">
            <text class="label">支付方式</text>
            <view class="value flex">
              <image
                class="icon"
                src="@/static/payment/type-xianxia.png"
                mode=""></image>
              <text>线下支付</text>
              <image
                class="arrow"
                src="@/static/order/arrow.png"
                mode=""></image>
            </view>
          </view> -->

        <!--     <view class="box-xianxia">
            <view class="info-box">
              <div class="box-title">收款对公账户</div>

              <view class="box-loop-wrap"> -->
        <!-- <view class="tabs-wrap">
									<u-tabs :current="xianxia_account_index" :scrollable="false" :list="xianxia_account_list"
										keyName="title" lineColor="#CB0011" :lineWidth="28" :lineHeight="2" @click="xianxia_tabClick"
										:itemStyle="{height: '50px',fontSize: '28rpx',color:'#B3B9C9'}"
										:activeStyle="{fontWeight: 'bold',color: '#000000' }" :inactiveStyle="{}"></u-tabs>
								</view> -->

        <!--      <view
                  class="box-loop"
                  v-for="(item, index) in xianxia_account_list">
                  <view class="box-info">
                    <view class="label">公司全称</view>
                    <view
                      class="value"
                      @click="doCopyAccountInfo(item.company)">
                      {{ item.company }}
                      <image src="@/static/common/copy.png" mode=""></image>
                    </view>
                  </view>
                  <view class="box-info">
                    <view class="label">对公开户行</view>
                    <view
                      class="value"
                      @click="doCopyAccountInfo(item.bankName)">
                      {{ item.bankName }}
                      <image src="@/static/common/copy.png" mode=""></image>
                    </view>
                  </view>
                  <view class="box-info">
                    <view class="label">对公账户</view>
                    <view
                      class="value"
                      @click="doCopyAccountInfo(item.bankAccount)">
                      {{ item.bankAccount }}
                      <image src="@/static/common/copy.png" mode=""></image>
                    </view>
                  </view>
                </view>
              </view>
            </view>

            <view class="info-box upload-wrap">
              <div class="box-title">上传转账凭证</div>
              <view class="upload-box">
                <view class="upload-list">
                  <view
                    class="upload-item"
                    v-for="(pic, index) in uploadImages"
                    :key="index"
                    @click="doPreview(pic)">
                    <view
                      class="remore-box flex-center"
                      @click.stop="doRemove(pic, index)">
                      <image
                        class="upload-remove"
                        src="@/static/feedback/remove.png"
                        mode=""></image>
                    </view>
                    <view class="poster-box">
                      <image
                        class="upload-image"
                        :src="pic"
                        mode="aspectFill"></image>
                    </view>
                  </view>
                  <view
                    class="upload-item"
                    @click="doUpload()"
                    v-if="uploadImages.length < 6">
                    <image
                      class="upload-icon"
                      src="@/static/payment/type-xianxia-upload.png"
                      mode=""></image>
                  </view>
                </view>
              </view>
            </view>
          </view> -->
        <!-- </view> -->
      </view>

      <view class="box-item box-pay" @click="open_invoice()">
        <view class="pay-info">
          <view class="pay-type flex-between">
            <text class="label">发票信息</text>
            <view class="value flex">
              <text>
                {{ invoice_info.invoiceStatus == 1 ? "开票" : "不开票" }}
              </text>
              <image
                class="arrow"
                src="@/static/order/arrow.png"
                mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>

    <w_bottom_safe height="140" />

    <view class="page-foot">
      <view class="safe-fixed-bottom">
        <view class="price-box flex">
          <view class="text">合计应付：</view>
          <text class="huobi">￥</text>
          <text class="value">{{ real_payment_money }}</text>
        </view>
        <button
          class="btn flex-center"
          :disabled="false"
          @click="toOrderSubmit()">
          提交订单
        </button>
      </view>
    </view>

    <order_remark_pop ref="order_remark_pop" @confirm="confirmRemark" />
    <order_points_deduction_pop
      ref="order_points_deduction_pop"
      @confirm="confirmPoints" />
    <order_choose_coupon_pop
      ref="order_choose_coupon_pop"
      @confirm="confirmCoupon" />
    <invoice_pop ref="invoice_pop" @confirm="confirm_invoice" />
    <order_payment_methods_choose_pop
      ref="order_payment_methods_choose_pop"
      @confirm="confirmPaymentType" />
  </view>
</template>

<script>
import dayjs from "dayjs";

import order_remark_pop from "@/components/order/order_remark_pop.vue";
import order_points_deduction_pop from "@/components/order/order_points_deduction_pop.vue"; //积分抵扣
import order_choose_coupon_pop from "@/components/order/order_choose_coupon_pop.vue"; //优惠券
import invoice_pop from "@/components/invoice/invoice_pop.vue"; //发票
import order_payment_methods_choose_pop from "@/components/order/order_payment_methods_choose_pop.vue";

export default {
  components: {
    order_remark_pop,
    order_points_deduction_pop,
    order_choose_coupon_pop,
    invoice_pop,
    order_payment_methods_choose_pop,
  },
  data() {
    return {
      is_test_pay_order: true, //测试假支付

      from: "", //product-detail  ||  cart
      is_miaosha: 0,
      cuxiaoId: "",
      //
      address_selected: {}, //地址
      pagination_address: {
        page: 1,
        pageNum: 20,
      },
      coupon_selected: {}, //优惠券
      coupons_for_allow_use: [],
      remark: "",
      //
      payment_products: [],
      total_product_number: 0,
      total_product_price: 0, //商品总金额
      total_order_price: 0, //订单总金额
      order_zhekou_bili: 10, //折扣比例 10折 默认不打折
      order_zhekou_price: 0, //折扣金额
      order_yunfei: 0, //运费金额
      order_points_dixian_price: 0, //积分抵现金额
      order_points_dixian_number: 0, //使用积分数量

      pay_info: {}, //预下单信息
      jifen_pay: {
        // if_open: 1,//是否开启积分抵现
        // jifen: "17",//可用积分
        // money: "1.70",//可抵扣金额
        // rule: 10//抵扣比例 rule 积分抵扣 1元
      }, //积分抵现信息
      //

      my_info: {}, //我的信息 包含 余额 佣金数值
      //
      invoice_info: {
        invoiceStatus: 0, //是否开票 0-不需要 1-需要发票
        invoiceType: "1", //发票类型：1-普通发票 2-专用发票
        titleType: "1", //抬头：1-个人 2-单位
        title: "", //
        shibiema: "", //
        companyAddress: "", //
        companyPhone: "", //
        bankName: "", //
        bankNo: "", //
      },
      // 支付方式
      pay_type_value: "weixin",
      valueMap: {
        weixin: {
          value: "weixin",
          title: "微信支付",
        },
        yue: {
          value: "yue",
          title: "余额支付",
        },
        xianxia: {
          value: "xianxia",
          title: "线下支付",
        },
      },

      uploadImages: [], //线下凭证上传
      allow_upload_number: 1, //最大上传数量限制
      xianxia_account_list: [],
      xianxia_account_select: {},

      jifenrule: {},
    };
  },

  computed: {
    real_payment_money() {
      // let money = parseFloat((this.total_order_price - this.order_points_dixian_price).toFixed(2))
      let money = parseFloat(
        (this.pay_info.orderPrice - this.order_points_dixian_price).toFixed(2)
      );
      return money;
    },
  },

  onLoad(option) {
    this.from = option.from || "";
    this.is_miaosha = option.is_miaosha || "";
    this.cuxiaoId = option.cuxiaoId || "";

    this.getCacheProduct();
    this.query_xianxia_account();
  },
  onShow() {
    this.query_user();
    this.query_address();
    this.query_pay_info();
  },
  onHide() {},

  onPullDownRefresh() {},
  onReachBottom() {},
  methods: {
    //下单成功后 移除商品信息
    clearCacheProduct() {
      if (this.from == "cart") {
        //移除购物车中商品
        let inventoryId = this.payment_products
          .map((v) => v.inventoryId)
          .join(",");
        this.$api({
          url: "/service.php",
          method: "get",
          data: {
            action: "gouwuche_del",
            inventoryId: inventoryId, //产品规格id(多个用,分开)
          },
        }).then((res) => {
          if (res.code == 200) {
            this.$store.commit("set_vuex_cart_number", res.data.count);
          }
        });
      }
      uni.removeStorageSync("cache_payment_products");
    },
    //获取缓存的产品信息
    getCacheProduct() {
      //本地产品数据
      let cache_payment_products = uni.getStorageSync("cache_payment_products");
      if (cache_payment_products) {
        this.payment_products = JSON.parse(cache_payment_products);

        let total_product_number = 0;
        let total_product_price = 0;
        this.payment_products.forEach((v) => {
          total_product_number += parseInt(v.num);
          total_product_price += v.priceSale * parseInt(v.num);
        });
        this.total_product_number = total_product_number;
        this.total_product_price = total_product_price;
        console.log(total_product_price, "s数量11");
        this.$log("缓存 待下单产品", this.payment_products);
      } else {
      }
    },
    //获取缓存的地址信息

    //
    query_user() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "users_userInfo",
        },
      }).then((res) => {
        if (res.code == 200) {
          this.my_info = res.data;
        }
      });
    },

    query_xianxia_account() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "pay_getOfflineBanks",
        },
      }).then((res) => {
        if (res.code == 200) {
          let list = res.data;
          list.forEach((v, index) => {
            v.title = "账户" + (index + 1);
          });
          this.xianxia_account_list = list;
          this.xianxia_account_select = this.xianxia_account_list[0] || {};
        }
      });
    },

    query_address() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "userAddress_lists",
          ...this.pagination_address,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          let list = res.data;
          list.forEach((v) => {
            v.full_addr = [v.country, v.province, v.city, v.area]
              .filter((v) => !!v)
              .join("-");
            // v.xing = v.name[0] || ''
          });

          let cache_payment_address_id = uni.getStorageSync(
            "cache_payment_address_id"
          );
          console.log(
            "缓存的地址id  cache_payment_address_id",
            cache_payment_address_id
          );
          let cache_index = list.findIndex(
            (v) => v.id == cache_payment_address_id
          );
          let default_index = list.findIndex((v) => v.moren == 1);

          if (cache_index > -1) {
            this.address_selected = list[cache_index];
          } else {
            uni.removeStorageSync("cache_payment_address_id");
            if (default_index > -1) {
              this.address_selected = list[default_index];
            } else {
              this.address_selected = {};
            }
          }
        }
        this.hideLoading();
      });
    },

    get_pay_info_params() {
      let product_items = this.payment_products.map((v) => ({
        inventoryId: v.inventoryId,
        productId: v.productId,
        num: v.num,
      }));
      let productInfo = JSON.stringify(product_items);

      let params = {
        productInfo: productInfo,
        addressId: this.address_selected.id || "",
        yhqId: this.coupon_selected.id || "",
      };
      return params;
    },

    query_pay_info() {
      let params = this.get_pay_info_params();
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "orders_getPayInfo",
          ...params,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.pay_info = data;
          this.jifen_pay = data.jifen_pay || {}; //积分信息
          this.jifenrule = data.jifenrule || {};

          //
          this.total_order_price = data.orderPrice || 0;

          //this.total_product_price = data.goods_price || 0;
          this.order_zhekou_bili = parseFloat(data.zhekou) || 10;
          this.order_zhekou_price = parseFloat(data.zhekou_price) || 0;
          this.order_yunfei = data.yunfei || 0;

          this.format_coupon_view_info(data.yhqList);
          this.coupons_for_allow_use = data.yhqList || [];
          // this.total_product_price = data.goods_price;

          if (this.coupon_selected.id) {
            this.total_order_price = (
              this.total_order_price - this.coupon_selected.jian
            ).toFixed(2);
          }
        } else {
          uni.showModal({
            title: "提示",
            content: res.message,
            confirmText: "确定",
            showCancel: false,
            success: (res) => {
              this.toBack({
                time: 1000,
              });
            },
          });
        }
        // this.hideLoading()
      });
    },

    // 格式化优惠券展示信息
    format_coupon_view_info(list) {
      list.forEach((v) => {
        v.man = parseFloat(v.man);
        v.jian = parseFloat(v.jian);
        v.tiaojian = v.man == 0 ? "无门槛" : `满${v.man}元可用`;
      });
    },

    //选择地址
    toChooseAddress() {
      this.toRoute({
        path: "/address-list",
        query: {
          from: "order",
        },
      });
    },

    //订单备注
    openRemarkPop() {
      this.$refs.order_remark_pop.init();
    },
    confirmRemark(value) {
      this.$log("订单备注", value);
      this.remark = value;
    },

    //积分抵现
    openPointsPop() {
      this.$refs.order_points_deduction_pop.init(
        this.pay_info,
        this.real_payment_money
      );
    },
    confirmPoints(value) {
      this.$log("积分抵扣", value);
      // this.remark = value
      this.order_points_dixian_number = value; //使用积分数量
      this.order_points_dixian_price = parseFloat(
        (value / this.jifenrule.jifen).toFixed(2)
      ); //积分抵现金额
    },

    //优惠券
    openCouponPop() {
      this.$refs.order_choose_coupon_pop.init(
        this.coupons_for_allow_use,
        this.real_payment_money
      );
    },
    confirmCoupon(item) {
      this.$log("订单选择优惠券", item);
      this.coupon_selected = item;
      this.query_pay_info();
    },

    // 支付方式
    openPaymentOptions() {
      this.$refs.order_payment_methods_choose_pop.init();
    },

    confirmPaymentType(value) {
      console.log("支付方式", value);
      this.pay_type_value = value;
    },

    // 发票信息
    open_invoice() {
      this.$refs.invoice_pop.init();
    },
    confirm_invoice(info) {
      this.invoice_info = {
        invoiceStatus: info.invoiceStatus || "", //是否开票 0-不需要 1-需要发票
        invoiceType: info.invoiceType || "",
        titleType: info.titleType || "",
        title: info.title || "",
        shibiema: info.shibiema || "",
        companyAddress: info.companyAddress || "",
        companyPhone: info.companyPhone || "",
        bankName: info.bankName || "",
        bankNo: info.bankNo || "",
      };
    },

    toOrderSubmit() {
      if (!this.address_selected.id) {
        this.$alert("请选择收货地址");
        return;
      }

      if (!this.pay_type_value == "xianxia") {
        if (!this.uploadImages.length) {
          this.$alert("请上传转账凭证信息");
          return;
        }
      }

      this.mix_throttle(this.doOrderSubmitFn);
    },

    get_pay_params() {
      let product_items = this.payment_products.map((v) => ({
        inventoryId: v.inventoryId,
        productId: v.productId,
        num: v.num,
      }));
      let productInfo = JSON.stringify(product_items);

      let params = {
        addressId: this.address_selected.id || "",
        productInfo: productInfo,
        yhqId: this.coupon_selected.id || "", //优惠券记录ID
      };
      return params;
    },

    doOrderSubmitFn() {
      this.showLoading({
        title: "订单提交中",
        disClose: true,
      });

      let params = this.get_pay_params();

      let paramsOrder = {
        action: "orders_create",
        ...params,

        jifen: this.order_points_dixian_number, //使用了多少积分
        peisongType: 1, //配送类型：1-快递物流 2-上门自提
        peisongTime: "", //配送时间
        yhqId: this.coupon_selected.id || "", //优惠券记录ID
        tuanId: "", //参与拼团的团ID
        tuanType: "", //拼团类型：0-普通订单 1-普通团 2-社区团
        remark: this.remark,
        orderType: 0, //订单类型：0-普通订单 1-拼团订单 2-秒杀订单 3-积分订单
        cuxiaoId: this.cuxiaoId || "",
        ...this.invoice_info, //发票信息
      };

      if (this.cuxiaoId) {
        paramsOrder.orderType = 2;
      }

      this.$log("要提交的表单数据", params);

      // return
      this.$api({
        url: "/service.php",
        method: "get",
        data: paramsOrder,
      }).then((res) => {
        if (res.code == 200) {
          this.order_id = res.data.id;
          this.do_order_pay();
          // this.hideLoading();
        } else {
          this.hideLoading();
          this.$alert(res);
        }
        // this.hideLoading()
      });
    },

    do_order_pay() {
      if (this.order_points_dixian_number > 0) {
        this.use_jifen_pay();
      } else {
        if (this.pay_type_value == "yue") {
          this.pay_use_yue();
        } else if (this.pay_type_value == "weixin") {
          this.pay_use_weixin();
        } else if (this.pay_type_value == "xianxia") {
          this.pay_use_xianxia();
        } else if (this.pay_type_value == "yongjin") {
          this.pay_use_yongjin();
        }
      }
    },

    // 余额支付
    pay_use_yue() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "pay_balance",
          orderType: 1,
          orderId: this.order_id,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.toPaySuccess();
        } else {
        }
      });
    },

    // 微信支付
    pay_use_weixin() {
      this.showLoading({
        title: "支付信息请求中",
        disClose: true,
      });
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "pay_weixin",
          orderType: 1,
          orderId: this.order_id,
        },
      }).then((res) => {
        // this.$alert(res)
        let data = res.data;

        // if (this.is_test_pay_order) {
        // 	this.toPaySuccess()
        // 	return
        // }

        if (res.code == 200) {
          uni.requestPayment({
            provider: "wxpay",
            timeStamp: String(data.timeStamp),
            nonceStr: data.nonceStr,
            package: data.package,
            signType: data.signType,
            paySign: data.paySign,
            success: (res) => {
              console.log("支付成功", res);

              this.toPaySuccess();
            },
            fail: (err) => {
              this.$alert("支付失败");
              setTimeout(() => {
                this.toPayFail();
              }, 1000);
              // console.log('支付失败', err)
            },
            complete: () => {
              this.hideLoading();
            },
          });
        } else {
          this.$alert(res);
        }

        // #ifdef H5
        this.hideLoading();
        // #endif
      });
    },

    // 余额支付
    pay_use_xianxia() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "pay_offline",
          orderType: 1,
          orderId: this.order_id,
          bankId: this.xianxia_account_select.id || "",
          remark: this.remark,
          images: this.uploadImages.join(","),
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          // this.toPaySuccess();
        } else {
        }
        this.toRoute({
          mode: "reLaunch",
          path: "/order-list",
        });
      });
    },

    //佣金支付
    pay_use_yongjin() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "pay_commission",
          orderType: 1,
          orderId: this.order_id,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.toPaySuccess();
        } else {
        }
      });
    },

    // 积分抵现
    use_jifen_pay() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "pay_jifen",
          orderType: 1, //1-商品订单
          orderId: this.order_id,
          jifen: this.order_points_dixian_number, //需要抵扣的积分
        },
      }).then((res) => {
        // this.$alert(res)
        let data = res.data;
        if (res.code == 200) {
          if (res.isOver == 1) {
            this.toPaySuccess();
          } else {
            if (this.pay_type_value == "yue") {
              this.pay_use_yue();
            } else if (this.pay_type_value == "weixin") {
              this.pay_use_weixin();
            } else if (this.pay_type_value == "xianxia") {
              this.pay_use_xianxia();
            } else if (this.pay_type_value == "yongjin") {
              this.pay_use_yongjin();
              console.log("yongjin");
            }
          }
        } else {
          this.$alert(res);
        }
      });
    },

    toPaySuccess() {
      this.toPayResult(1);
    },
    toPayFail() {
      // this.toPayResult(0)

      this.toRoute({
        path: "/order-detail",
        query: {
          from: "payment",
          id: this.order_id,
        },
        mode: "reLaunch",
      });
    },

    //
    toPayResult(is_pay = 0) {
      this.clearCacheProduct();

      this.toRoute({
        path: "/payment-success",
        query: {
          order_id: this.order_id,
          type: "order",
          is_pay: is_pay,
        },
        // mode: 'redirectTo'
      });
    },

    //线下图片上传处理
    doCopyAccountInfo(data) {
      uni.setClipboardData({
        data: `${data}`,
        success: () => {
          console.log("复制");
          this.$alert("已复制");
        },
      });
    },
    // 上传
    doPreview(pic) {
      uni.previewImage({
        urls: [pic],
      });
    },
    doUpload() {
      // #ifdef H5
      this.do_h5_upload();
      // #endif

      // #ifndef H5
      this.do_mp_upload();
      // #endif
    },

    // H5环境上传图片
    do_h5_upload() {
      let count = this.allow_upload_number - this.uploadImages.length;
      uni.chooseImage({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.path,
                if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.uploadImages.push(pic);
              }
            });
          });
        },
      });
    },

    // 小程序环境上传图片
    do_mp_upload() {
      console.log("dianjile111");
      let count = this.allow_upload_number - this.uploadImages.length;
      uni.chooseMedia({
        count: count || 1,
        mediaType: ["image"], // 图片// ['image', 'video']
        sourceType: ["album", "camera"], // 从相册选择
        sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
        success: (res) => {
          console.warn("选择图片 success", res);

          // tempFilePaths  路径列表
          // tempFiles			文件列表 【{tempFilePath: '临时路径'}】
          res.tempFiles.forEach((file) => {
            this.$apiUpload({
              url: "/service.php",
              method: "post",
              data: {
                action: "index_localUpload",
                img: file.tempFilePath,
                // if_touxiang: 0,
              },
            }).then((res) => {
              if (res.code == 200) {
                let pic = res.data;
                this.uploadImages.push(pic);
              }
            });
          });
        },
      });
    },

    doRemove(pic, index) {
      this.uploadImages.splice(index, 1);
    },
    // 上传
  },
};
</script>

<style lang="scss">
page {
  background: #f3f4f8;
}
</style>

<style lang="scss" scoped>
.page {
}

.page-ctx {
  padding: 24rpx 32rpx;
}

.box-item {
  margin-bottom: 24rpx;
  padding: 32rpx 24rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.addr-wrap {
  margin-bottom: 24rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .addr-item {
    padding: 24rpx 0 0;
    background: #ffffff;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
  }

  .addr-inner {
    margin: 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 36rpx;

    .addr-left {
      display: flex;
      align-items: center;
      flex: 1;
      overflow: hidden;
      padding-right: 20rpx;

      .icon-box {
        padding: 24rpx;

        image {
          width: 56rpx;
          height: 56rpx;
        }
      }

      .ico-dai {
        padding: 24rpx;

        .xing {
          width: 56rpx;
          height: 56rpx;
          background: #4d9efa;
          font-size: 28rpx;
          font-weight: bold;
          color: #ffffff;

          text-align: center;
          border-radius: 50%;
        }
      }

      .user-info {
        .name {
          font-size: 28rpx;
          font-weight: bold;
          color: #000000;
          margin-right: 24rpx;
        }

        .phone {
          font-size: 28rpx;
          color: #333333;
          margin-right: 32rpx;
        }

        .desc {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #cb0011;
        }
      }

      .address-info {
        font-size: 24rpx;
        margin-right: 0;
        margin-top: 12rpx;

        view {
          margin-top: 6rpx;
        }
      }

      .addr-empty {
        font-size: 28rpx;
        color: #666666;
      }
    }

    .addr-right {
      align-self: stretch;
      width: 72rpx;

      image {
        width: 14rpx;
        height: 24rpx;
      }
    }
  }
}

.products-wrap {
  padding: 32rpx 24rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;

  .sec-title {
    margin-bottom: 24rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .product-list {
    .product-item {
      padding: 16rpx 0;

      & + .product-item {
        border-top: 1rpx solid #eee;
      }

      .poster-box {
        width: 176rpx;
        height: 176rpx;
        border-radius: 10rpx;
        overflow: hidden;

        image {
          width: 176rpx;
          height: 176rpx;
        }
      }

      .info {
        flex: 1;
        overflow: hidden;
        padding-left: 20rpx;
        // width: calc(100% - 140rpx);

        .title-box {
          height: 80rpx;
        }

        .title {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #222222;
          line-height: 1.5;
        }

        .guige-box {
          height: 30rpx;
          margin-top: 12rpx;
        }

        .guige {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #b3b9c9;
        }

        .price-info {
          margin-top: 48rpx;

          .price {
            .huobi {
              font-size: 20rpx;
              color: #e23410;
            }

            .price-val {
              font-weight: bold;
              font-size: 32rpx;
              color: #e23410;
            }
          }

          .number-box {
            .num {
              font-family: PingFang SC, PingFang SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #000000;
            }
          }
        }
      }
    }
  }
}

.peisong-info {
  margin-top: 34upx;

  .label {
    font-weight: bold;
    font-size: 28rpx;
    color: #000000;
  }

  .value {
    & > image {
      width: 40rpx;
      height: 40rpx;
      background: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      border: 2rpx solid #707070;
    }
    &-t1 {
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
      margin: 0 16upx;
    }
    &-t2 {
      width: 112rpx;
      height: 32rpx;
      background: #f49c0d;
      border-radius: 4rpx 4rpx 4rpx 4rpx;
      font-size: 20rpx;
      color: #ffffff;
      text-align: center;
      line-height: 32upx;
    }
  }
}

.remark-info {
  padding: 15rpx 0;

  .label {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 24rpx;
    color: #222222;
  }

  .value {
    flex: 1;
    overflow: hidden;

    .text {
      flex: 1;
      padding-left: 80rpx;

      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }

    .arrow {
      margin-left: 20rpx;
      width: 14rpx;
      height: 24rpx;
    }
  }
}

.box-user {
  margin-top: 24rpx;

  .user-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .input-items {
    margin-top: 34rpx;

    .input-item {
      margin-bottom: 16rpx;

      input {
        padding: 0 24rpx;
        height: 72rpx;
        line-height: 72rpx;
        background: #f8f8f8;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #000;
      }

      .input-p {
        background: #f8f8f8;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #777;
      }
    }
  }
}

.box-price {
  margin-top: 24rpx;

  .mingxi-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .mingxi-list {
  }

  .mingxi-item {
    margin-top: 20rpx;

    .label {
      margin-right: 20rpx;
      // width: 160rpx;
      min-width: 160rpx;
      min-width: 5em;

      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #222222;
    }

    .num {
      flex: 1;
      text-align: left;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #b3b9c9;
    }

    .value {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 24rpx;
      color: #222222;

      .value-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #222222;
      }

      .arrow {
        margin-left: 20rpx;
        width: 14rpx;
        height: 24rpx;
      }
    }
  }

  .total-info {
    border-top: 1rpx solid #f8f8f8;
    margin-top: 32rpx;
    padding-top: 32rpx;

    .label {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 28rpx;
      color: #222222;
    }

    .value {
      font-family: PingFang SC, PingFang SC;
      font-weight: 800;
      font-size: 28rpx;
      color: #000000;
    }
  }
}

.box-pay {
  padding: 0;

  .pay-info {
    .pay-type {
      padding: 24rpx 24rpx;

      .label {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 28rpx;
        color: #222222;
      }

      .num {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #222222;
      }

      .value {
        // flex: 1;
        // overflow: hidden;
        .icon {
          margin-right: 24rpx;
          width: 40rpx;
          height: 40rpx;
        }

        text {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }

        .value-1 {
          font-family: PingFang SC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #000000;
        }

        .arrow-box {
          height: 40rpx;
        }

        .arrow {
          margin-right: 0;
          margin-left: 24rpx;
          width: 14rpx;
          height: 24rpx;
        }
      }
    }

    .box-xianxia {
      padding: 10rpx 24rpx;
      margin-top: 0rpx;

      .info-box {
        .box-title {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }

        .box-loop {
          & + .box-loop {
            margin-top: 20rpx;
            border-top: 1rpx solid #eee;
          }
        }

        .box-info {
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .label {
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            font-size: 24rpx;
            color: #000000;
          }

          .value {
            display: inline-flex;
            align-items: center;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #000000;

            image {
              margin-left: 16rpx;
              width: 24rpx;
              height: 24rpx;
            }
          }
        }
      }

      .upload-wrap {
        margin-top: 32rpx;

        .upload-box {
          margin-top: 24rpx;

          image {
          }
        }
      }
    }
  }
}

.page-foot {
  .price-box {
    flex: 1;
    overflow: hidden;

    .text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #222222;
    }

    .huobi {
      font-size: 24rpx;
      color: #e23410;
    }

    .value {
      font-weight: bold;
      font-size: 32rpx;
      color: #e23410;
    }
  }

  .btn {
    width: 224rpx;
    height: 80rpx;
    background: #f49c0d;
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;

    &.btn-disabled {
      background: #dddddd;
    }

    &[disabled] {
      background: #dddddd;
    }
  }
}

// 线下转账凭证
.upload-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  .upload-item {
    margin-bottom: 24rpx;
    margin-right: 16rpx;
    position: relative;
    width: 202rpx;
    height: 198rpx;
    background: #f6fafd;
    background: #fff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;

    &:nth-child(3n) {
      margin-right: 0;
    }

    .upload-icon {
      width: 100%;
      height: 100%;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .poster-box {
      width: 100%;
      height: 100%;

      .upload-image {
        width: 100%;
        height: 100%;
        border-radius: 8rpx 8rpx 8rpx 8rpx;
      }
    }

    .remore-box {
      position: absolute;
      z-index: 10;
      right: -20rpx;
      top: -20rpx;
      width: 60rpx;
      height: 60rpx;

      .upload-remove {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
